<template>
  <el-card class="filter-container">
    <el-form ref="filterForm" :inline="true">
      <el-form-item label="合同编号">
        <el-input
          v-model="query.contractName"
          placeholder="请输入合同编号"
          style="width: 200px"
        />
      </el-form-item>
      <dictionary
        v-model="query.contractType"
        label="合同类型"
        code="CONTRACT_TYPE"
      />
      <el-collapse-transition>
        <div v-show="openSearch">
          <el-form-item v-show="openSearch" label="合同">
            <el-input
              v-model="query.a"
              placeholder="请输入内容"
              class="input-with-select"
              :disabled="true"
            >
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </el-form-item>
        </div>
      </el-collapse-transition>
    </el-form>
    <div class="filter-button-container">
      <el-button
        type="text"
        @click="openSearch = !openSearch"
      >展开搜索</el-button>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="restForm">重置</el-button>
    </div>
  </el-card>
</template>

<script>
import dictionary from '@/components/Dictionary'
export default {
  name: 'Search',
  components: {
    dictionary
  },
  data() {
    return {
      query: {},
      openSearch: false
    }
  },
  methods: {
    search() {
      this.$emit('search', this.query)
    },
    restForm() {
      this.query = {}
    }
  }
}
</script>

<style>
</style>
